<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css" media="screen">
            html, body {
                margin: 0;
                padding: 0;

            }
            #infinite {
                width: 100%;
            }
            #infinite .infinite_item {
                width:100%;
                height: 40px;
                border-bottom: 1px solid gray;
            }
            #infinite .infinite_loader {
                width:100%;
                height:40px;
                text-align: center;
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
         <div id="wrap">
            <div id="infinite">

            </div>
        </div>
        <script type="text/javascript">
            function Infinite(options) {
                this.options = options;
                this.container = document.querySelector(options.el);
                this.init();
            }
            Infinite.prototype.init = function() {
                this.container.appendChild(this.createItems(this.options.data));
                this.createLoader();
                let start = 20;
                window.addEventListener('scroll', () => {
                    const scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
                    if(scrolltop + window.innerHeight >= this.container.clientHeight) {
                        this.loading();
                        this.options.loadMore(start)
                            .then(res => {
                                this.loaded();
                                this.addData(res);

                            })
                            .catch(err => {
                                console.log(err);
                            })
                            start += 10;
                    }
                });
            }
            Infinite.prototype.createItems = function(arr) {
                let container = document.createDocumentFragment();
                for(let i = 0, len = arr.length; i < len; i++) {
                    var item = document.createElement('div');
                    item.innerHTML = arr[i];
                    item.className = this.options.itemClassName;
                    container.appendChild(item);
                }
                return container;
            }
            Infinite.prototype.createLoader = function() {
                var loader = document.createElement('div');
                loader.className = 'infinite_loader';
                loader.innerHTML = '正在加载中哟...';
                this.loader = loader;
            }
            Infinite.prototype.loading = function() {
                this.container.appendChild(this.loader);
            }
            Infinite.prototype.loaded = function() {
                let loader = this.container.lastChild;
                if(loader == this.loader) {
                    this.container.removeChild(loader);
                }
            }
            Infinite.prototype.addData = function(arr) {
                this.container.appendChild(this.createItems(arr));
            }
            let initData = [];
            let i = 0;
            for(; i < 20; i++) {
                initData.push(`item ${i}`);
            }

            const infinite = new Infinite({
                el: '#infinite',
                data: initData,
                itemClassName: 'infinite_item',
                loadMore: function(i) {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            let data = [];
                            let len = 10+i;
                            for(; i<len; i++) {
                                data.push(`item ${i}`);
                            }
                            resolve(data);
                        }, 2000);
                    })
                }
            });
        </script>
    </body>
</html>